<template>
  <div>
    <div class="breadcrumbs">
      <span>{{ $t('menu.ARKProject') }}&nbsp; ></span>
      &nbsp;{{ tabActiveIndex === 1?$t('menu.active'):(tabActiveIndex === 0?$t('menu.oncoming'):$t('menu.completed'))}}
    </div>
    <div class="right-body">
      <div class="tab-title">
        <div class="item item1 " :class="{'active':tabActiveIndex === 1}" @click="changeTab(1)">
          {{ $t('menu.active') }}
        </div>
        <div class="item item2" :class="{'active':tabActiveIndex === 0}" @click="changeTab(0)">
          {{ $t('menu.oncoming') }}
        </div>
        <div class="item item3" :class="{'active':tabActiveIndex === 2}" @click="changeTab(2)">
          {{ $t('menu.completed') }}
        </div>
      </div>
      <div class="tab-con clearfix">
        <div class="con-item " v-for="(project,index) in projectList" :key="index">
          <prject-card v-if="project" :project="project" :state="tabActiveIndex"></prject-card>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination
          layout="prev, pager, next"
          :current-page.sync="query.page"
          @current-change="loadProjectList"
          :page-size="query.size"
          :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {project} from "@/requests/api";
import {cutOutNum} from "@/utils/defined";
import prjectCard from "@/components/project/projectCard.vue"

export default {
  name: "ArkProject",
  components: {
    prjectCard
  },
  data() {
    return {
      tabActiveIndex: 1,
      pageTotal: 0,
      query: {
        page: 1,
        size: 4,
        currency: 'ARK',
        state: 0
      },
      projectList: []
    }
  },
  filters: {
    cutOutNum
  },
  mounted() {
    this.loadProjectList(this.tabActiveIndex)
  },
  computed: {
    languageData() {
      return this.$store.state.language;
    }
  },
  methods: {
    cutOutNum,
    project,
    changeTab(index) {
      console.log(index)
      this.tabActiveIndex = index;
      this.query.page = 1
      this.query.size = 4
      this.loadProjectList(index)
    },
    loadProjectList(value) {
      this.query.state = value
      // console.log(this.query)
      project({...this.query}).then(r => {
        const  {resultCode, resultMessage, data} = r
        console.log(r)
        if ( resultCode=== 0) {
          this.projectList = data.list
          this.pageTotal = data.total
        }
        else {
          this.$message.error(resultMessage)
        }
      })
    },
  }
}
</script>

<style scoped>
.test1-enter-active {
  animation: move1 .5s ease-out;
}


@keyframes move1 {
  from {
    transform: translateY(100vh);
  }

  to {
    transform: translateY(0px);
  }
}

/*带背景的分页按钮背景色end*/
::v-deep .el-pager {
  border: 1px solid #dddddd;
  border-radius: 5px;
  overflow: hidden;
}

::v-deep .el-pager li {
  border-right: 1px solid #dddddd;
}

::v-deep .el-pager li:last-child {
  border-right: none;
}

/*不带背景的分页按钮背景色begin*/
::v-deep .el-pager li.active {
  color: white;
  cursor: default;
  background-color: #67c04d;

}

::v-deep .el-pagination .el-pager li:hover {
  color: #67c04d;
}

::v-deep .el-pagination .el-pager li:not(.disabled):hover {
  color: #0ec008;
}

/*不带背景的分页按钮背景色end*/
</style>
